<template>
  <div class="main-box scroll">
    <!--  面包屑导航  -->
    <div class="framework-select card">
      <jifang :color="getPrimary" style="width: 28px; height: 28px; margin-right: 10px"></jifang>
      <el-select v-model="centerId" placeholder="请选择" style="width: 120px" @change="handleChange">
        <el-option v-for="item in categoryList" :key="item.id" :label="item.value" :value="item.id"></el-option>
      </el-select>
    </div>
    <div class="framework-content card">
      <div class="top-content">
        <div class="top-box" v-for="(item, index) in topData" :key="index">
          <div
            class="top-title"
            @click="handleSelectTitle(item)"
            :class="isTitleSelect && selectItem === item.name ? 'backgroundOnSelect' : 'backgroundSelect'"
          >
            {{ item.name }}
          </div>
          <div class="top-cabinet">
            <div class="top-cabinet-head">
              <div
                class="head-left"
                :class="
                  isDivSelected && selectItem === item.name && selectRack === showRackName(item, 0)
                    ? 'backgroundOnSelect'
                    : 'backgroundSelect'
                "
                @click="handleSelect(item, showRackName(item, 0))"
              >
                <div
                  :class="isDivSelected && selectItem === item.name && selectRack === showRackName(item, 0) ? 'head-right' : ''"
                ></div>
                <div class="head-item">{{ showRackName(item, 0) }}</div>
              </div>
              <camera :color="getPrimary" class="caram" @click="openCamera(item.camera_id)"></camera>
              <div
                class="head-left"
                :class="
                  isDivSelected && selectItem === item.name && selectRack === showRackName(item, 1)
                    ? 'backgroundOnSelect'
                    : 'backgroundSelect'
                "
                @click="handleSelect(item, showRackName(item, 1))"
              >
                <div
                  :class="isDivSelected && selectItem === item.name && selectRack === showRackName(item, 1) ? 'head-right' : ''"
                ></div>
                <div class="head-item">{{ showRackName(item, 1) }}</div>
              </div>
            </div>
            <div class="cabinet-item-box">
              <div class="item-box" v-if="item && item.rack && item.rack[0]">
                <div
                  class="item"
                  v-for="(cabinet, i) in item.rack[0].rack_data"
                  :key="i"
                  @click="openModal(cabinet, item.name, item.rack[0].rack_name)"
                  :class="lineItem.seq === cabinet.seq ? 'select-item' : ''"
                >
                  <div class="item-status" :class="cabinet.status ? cabinet.status : 'green'"></div>
                  <div class="item-value" :title="cabinet.seq">{{ cabinet.seq }}</div>
                </div>
              </div>
              <div class="item-box" v-if="item && item.rack && item.rack[1]">
                <div
                  class="item"
                  v-for="(cabinet, i) in item.rack[1].rack_data"
                  :key="i"
                  @click="openModal(cabinet, item.name, item.rack[1].rack_name)"
                  :class="lineItem.seq === cabinet.seq ? 'select-item' : ''"
                >
                  <div class="item-status" :class="cabinet.status ? cabinet.status : 'green'"></div>
                  <div class="item-value" :title="cabinet.seq">{{ cabinet.seq }}</div>
                </div>
              </div>
              <div class="item-box" v-if="!(item.rack[0] || item.rack[1])">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-content">
        <div class="bottom-box" v-for="(item, index) in bottomData" :key="index">
          <window :color="getPrimary" style="height: 48px; margin-top: -3px"></window>
          <span class="bottom-text">{{ item.title }}</span>
          <ChartsOne :data="item.dataMap" :color="item.colorMap" :loading="loading"></ChartsOne>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="modalDetail"
      :title="modalTitle"
      width="880px"
      :top="'10vh'"
      :close-on-click-modal="false"
      :show-close="true"
      destroy-on-close
    >
      <ModalDetail v-if="modalDetail" :data="lineItem" :center-id="centerId" width="880px" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="assetPanel">
import ChartsOne from "./module/ChartsOne.vue";
import jifang from "./icon/icon_jifang.vue";
import ModalDetail from "./module/detail.vue";
import window from "./icon/icon_window.vue";
import camera from "./icon/icon_camera.vue";
import { localGet } from "@/utils/index";
import { AssetPanel } from "@/api/interface/asset";
import { computed, onUnmounted, onMounted, ref } from "vue";
import { _getFilterStatistic, _getSlaverStatistic, _getResourceStatistic } from "@/api/modules/asset/resourceVisual";
const categoryList = ref<AssetPanel.FilterField[]>([]);
const bottomData = ref([
  {
    title: "服务器",
    key: "server",
    dataMap: [
      { level: "正常", key: "normal", count: 0, color: "#0CB30C" },
      { level: "离线", key: "offline", count: 0, color: "rgba(255, 195, 0, 1)" },
      { level: "故障", key: "abnormal", count: 0, color: "rgba(232, 5, 5, 1)" },
      { level: "未知", key: "unknown", count: 0, color: "rgba(166, 166, 166, 1)" }
    ],
    colorMap: ["#0CB30C", "rgba(255, 195, 0, 1)", "rgba(232, 5, 5, 1)", "rgba(166, 166, 166, 1)"]
  },
  {
    title: "存储",
    key: "storage",
    dataMap: [
      { level: "正常", key: "normal", count: 0, color: "#0CB30C" },
      { level: "离线", key: "offline", count: 0, color: "rgba(255, 195, 0, 1)" },
      { level: "故障", key: "abnormal", count: 0, color: "rgba(232, 5, 5, 1)" },
      { level: "未知", key: "unknown", count: 0, color: "rgba(166, 166, 166, 1)" }
    ],
    colorMap: ["#0CB30C", "rgba(255, 195, 0, 1)", "rgba(232, 5, 5, 1)", "rgba(166, 166, 166, 1)"]
  },
  {
    title: "交换机",
    key: "switchboard",
    dataMap: [
      { level: "正常", key: "normal", count: 0, color: "#0CB30C" },
      { level: "离线", key: "offline", count: 0, color: "rgba(255, 195, 0, 1)" },
      { level: "未知", key: "unknown", count: 0, color: "rgba(166, 166, 166, 1)" }
    ],
    colorMap: ["#0CB30C", "rgba(255, 195, 0, 1)", "rgba(166, 166, 166, 1)"]
  },
  {
    title: "安全设备",
    key: "secure",
    dataMap: [{ level: "未知", key: "unknown", count: 0, color: "rgba(166, 166, 166, 1)" }],
    colorMap: ["rgba(166, 166, 166, 1)"]
  },
  {
    title: "其他",
    key: "others",
    dataMap: [{ level: "未知", key: "unknown", count: 0, color: "rgba(166, 166, 166, 1)" }],
    colorMap: ["rgba(166, 166, 166, 1)"]
  }
]);
// const bottomShow = ref([]);
const topData = ref<AssetPanel.slaverStatistic[]>([]);
const selectItem = ref("");
const selectRack = ref("");
// const isHighlight = ref(false);
const loading = ref(false);
const isTitleSelect = ref(false);
const isDivSelected = ref(false);
const modalDetail = ref(false);
const getPrimary = computed(() => {
  return localGet("geeker-global")?.primary;
});
console.log(getPrimary.value);
// const chartData1 = ref([]);
// const testData = reactive([
//   {
//     label: "正常",
//     status: 0,
//     value: 1
//   },
//   {
//     label: "离线",
//     status: 0,
//     value: 1
//   },
//   {
//     label: "故障",
//     status: 0,
//     value: 1
//   },
//   {
//     label: "未知",
//     status: 0,
//     value: 1
//   }
// ]);
const lineItem = ref<AssetPanel.RackData>({ status: "", seq: "" });
const centerId = ref(1);
const passagewayId = ref("");
const refreshTime = ref<any>(null);
const modalTitle = ref("");
const categoryName = computed(() => {
  const data = categoryList.value || [];
  const list = data.find(a => a["id"] === centerId.value);
  return list ? list["value"] : "";
});

const showRackName = (item, index = 0) => {
  const name = ["A", "B"];
  return item.rack[index] ? item.rack[index].rack_name : name[index];
};
const handleSelect = (item, label) => {
  isDivSelected.value = !isDivSelected.value;
  if (selectItem.value !== item.name) {
    isDivSelected.value = true;
    isTitleSelect.value = true;
  }
  if (selectRack.value !== label) {
    isDivSelected.value = true;
  }
  if (isDivSelected.value) {
    selectItem.value = item.name;
    selectRack.value = label;
    passagewayId.value = item.passageway_id;
  } else {
    selectItem.value = "";
    selectRack.value = "";
    passagewayId.value = "";
  }
  lineItem.value = { status: "", seq: "" };
  getResourceData();
};
const handleSelectTitle = item => {
  isTitleSelect.value = !isTitleSelect.value;
  if (selectItem.value !== item.name) {
    isTitleSelect.value = true;
  }
  if (isTitleSelect.value) {
    selectItem.value = item.name;
    passagewayId.value = item.passageway_id;
  } else {
    selectItem.value = "";
    passagewayId.value = "";
  }
  lineItem.value = { status: "", seq: "" };
  getResourceData();
};
const handleChange = value => {
  centerId.value = value;
  isDivSelected.value = false;
  isTitleSelect.value = false;
  selectItem.value = "";
  selectRack.value = "";
  passagewayId.value = "";
  lineItem.value = { status: "", seq: "" };
  getServerData();
  getResourceData();
};
const openCamera = id => {
  console.log(id);
  // window.open(window.CONFIG.videoPath.vueMonitorVideo + '?name=' + id)
};
const openModal = (item, name1, name2) => {
  modalTitle.value = categoryName.value + " / " + name1 + " / " + name2 + " / " + item.seq;
  lineItem.value = item;
  modalDetail.value = true;
};
const getServerData = async () => {
  topData.value = [];
  const param = {
    data_center_id: centerId.value
  };
  const { data } = await _getSlaverStatistic(param);
  topData.value = data;
};
const getResourceData = async () => {
  loading.value = true;
  const param = {
    data_center_id: centerId.value,
    passageway_id: passagewayId.value,
    rack: selectRack.value
  };
  const { data } = await _getResourceStatistic(param);
  if (data) {
    bottomData.value.forEach(a => {
      a.dataMap.forEach(b => {
        b.count = data[a.key] && data[a.key][b.key] ? data[a.key][b.key] : 0;
      });
    });
    // bottomData.value = JSON.parse(JSON.stringify(bottomData.value));
  }
  loading.value = false;
};
const getFilterData = async () => {
  const { data } = await _getFilterStatistic();
  if (data && data["data_center"]) {
    categoryList.value = data["data_center"]["value"];
  }
};
onMounted(() => {
  getServerData();
  getResourceData();
  getFilterData();
  // refreshTime.value = setInterval(function () {
  //   getServerData();
  //   getResourceData();
  //   getFilterData();
  // }, 60000);
});
onUnmounted(() => {
  clearInterval(refreshTime.value);
});
</script>

<style lang="scss" scoped>
.main-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.framework-select {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 4px;
}
.framework-content {
  height: 100%;
  padding: 0 24px;
}
.top-content {
  display: flex;
  flex: 1;
  justify-content: space-between;
  padding: 0 10px;
  overflow: auto;
  .top-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 445px;
    margin-bottom: 10px;
  }
}
.top-title {
  width: 88px;
  height: 32px;
  margin: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 30px;
  color: #383838;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--el-color-primary);
  border-radius: 2px;
}
.top-cabinet {
  width: 100%;
  height: 100%;
  border: 1.5px solid var(--el-color-primary);
  border-radius: 4px;
  .top-cabinet-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 10px;
    background: var(--el-color-primary-light-9);
    .head-left {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 40px;
      cursor: pointer;
      background: var(--el-color-primary-light-9);
    }
    .head-left:hover,
    .head-left:focus {
      background: var(--el-color-primary-light-4);
    }
    .head-right {
      position: absolute;
      top: 39px;
      left: -34px;
      width: 210px;
      height: 50px;
      background-image: url("./img/trapezium.png");
    }
    .head-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      font-size: 20px;
      font-weight: 400;
      color: rgb(255 255 255 / 100%);
      background: var(--el-color-primary);
      border-radius: 50%;
      opacity: 1;
    }
  }
  .cabinet-item-box {
    display: flex;
    height: 475px;
    overflow: hidden scroll;
    .item-box {
      display: flex;
      flex-direction: column;
    }
  }
  .item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 120px;
    min-height: 35px;
    padding: 0 16px;
    margin: 10px;
    margin: 5px 35.5px;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(90deg, rgb(185 193 203 / 100%) 0%, rgb(185 193 203 / 100%) 100%);
    border: 1px solid rgb(128 128 128 / 100%);
    border-radius: 2px;
    opacity: 1;
    .item-status {
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }
    .item-value {
      width: 90px;
      margin-left: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .item:hover,
  .item:focus {
    background: var(--el-color-primary-light-4) !important;
    border: 1px solid var(--el-color-primary) !important;
    box-shadow: 0 0 4px var(--el-color-primary-light-5);
  }
}
.bottom-content {
  display: flex;
  justify-content: space-between;
  .bottom-box {
    position: relative;
    width: 284px;
    height: 158px;
    background: rgb(237 247 255);
    border-radius: 4px;
    .bottom-text {
      position: absolute;
      left: 0;
      display: inline-block;
      margin: 10px;
      color: #ffffff;
    }
  }
}
.select-item {
  background: var(--el-color-primary-light-4) !important;
  border: 1px solid var(--el-color-primary) !important;
  box-shadow: 0 0 4px var(--el-color-primary-light-5);
}
.caram {
  width: 30px;
  height: 30px;
  margin: 0 20px;
  cursor: pointer;
}
.yellow {
  background: #ff8d1a;
}
.red {
  background: rgb(253 1 0 / 100%);
}
.green {
  background: rgb(12 179 12 / 100%);
}
.grey {
  background: rgb(128 128 128 / 100%);
}
.backgroundSelect {
  background: #ffffff;
}
.backgroundOnSelect {
  background: var(--el-color-primary-light-4) !important;
}
</style>
